<template>
	<view class="cont" :style="theme">
		<view class="student" v-for="(item, index) in list" :key="index">
			<view class="flex-cb">
				<image :src="imgHost+'/user.png'" class="student-l"></image>
				<view class="student-cnt">
					<view>{{item.studentName}}</view>
					<view>{{item.phone}}</view>
				</view>
			</view>
			<view style="padding-left: 90rpx;margin-top: 20rpx;">
				<textarea class="py" type="text" placeholder="请输入评语" v-model="item.content" maxlength="200" />
				<!-- <u-upload width="135rpx" maxDuration="15" :compressed="compressed" height="135rpx" multiple
					:maxCount="5" :name="index" :fileList="item.showList" @afterRead="afterRead" @delete="deletePic"
					:accept="accept" /> -->
				<view class="videoImageUl">
					<view v-if="!item.showList || item.showList.length < 5" class="li" @click="chooseVideoImage(index)">
						<u-icon name="camera-fill" color="#D3D4D6" size="26"></u-icon>
					</view>
					<view v-for="(s,dex) in item.showList" :key="dex" class="li">
						<view class="del" @click="delect(index, dex)">
							<u-icon name="close" color="#fff" size="16rpx"></u-icon>
						</view>
						<video v-if="s.type=='video' || s.type=='1'" :src="s.url || s.src" class="cnts"></image></video>
						<image v-else :src="s.url || s.src" mode="aspectFit" class="cnts" @click="previewImg(s)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomState">
			<view @click="$noMultipleClicks(submit)" class="footBtn">提交</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				compressed: false,
				noClick: true,
				timeId: '',
				pwd: '',
				accept: 'image',
				deletable: true
			}
		},
		onLoad(ops) {
			this.timeId = ops.timeId
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			//单张图片预览
			previewImg(imgurl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = imgurl.url || imgurl.src
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			//点击上传图片或视频
			chooseVideoImage(index) {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages(index);
						} else {
							this.chooseVideo(index);
						}
					},
					fail() {
						return false
					}
				});
			},
			//上传图片
			chooseImages(index) {
				let that = this
				let listLength = this.list[index].showList.length
				let count = 5 - listLength
				if(count == 0) {
					return false
				}
				uni.chooseImage({
					count, //默认是9张
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						let imgFile = res.tempFilePaths;
						imgFile.forEach((item, m) => {
							uni.uploadFile({
								url: that.$app.baseUrls,
								filePath: item,
								header: {
									// #ifdef MP
									Cookie: uni.getStorageSync('cookie'),
									'content-type': 'application/json',
									// #endif
									// #ifdef H5
									platform: '3',
									token: uni.getStorageSync('token'),
									// #endif
									shopId: that.$store.state.shopId,
									gymId: that.venueId
								},
								name: 'file',
								formData: {
									folder: 'COURSE_IMG',
									type: ''
								},
								success(uploadFileRes) {
									// 上传完成需要更新 fileList
									that.$app.closeLoading()
									if (uploadFileRes.statusCode == 413) {
										that.$app.showToast('图片太大')
									} else if (uploadFileRes.statusCode == 200 &&
										uploadFileRes.data) {
										let list = [...that.list]
										const imageAllList2 = list[index].imageAllList2;
										const imageList = list[index].imageList;
										const showList = list[index].showList;
										imageAllList2.push(JSON.parse(uploadFileRes.data).showUrl)
										imageList.push(JSON.parse(uploadFileRes.data).insertUrl)
										showList.push({
											url: JSON.parse(uploadFileRes.data).showUrl,
											type: '0'
										})
										list[index].imageAllList2 = imageAllList2
										list[index].imageList = imageList
										list[index].showList = showList
										that.list = list
									}
								},
							});
						})

					}
				})
			},

			//上传视频
			chooseVideo(index) {
				let that = this
				let listLength = this.list[index].showList.length
				let count = 5 - listLength
				if(count == 0) {
					return false
				}
				uni.chooseVideo({
					maxDuration: 15, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count,
					// compressed: false,
					success: res => {
						let videoFile = res.tempFilePath;
						if(res.duration && res.duration > 15) {
							that.$app.showToast('上传视频不能大于15s')
							return false
						}
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: that.$app.baseUrls,
							filePath: videoFile,
							header: {
								// #ifdef MP
								Cookie: uni.getStorageSync('cookie'),
								'content-type': 'application/json',
								// #endif
								// #ifdef H5
								platform: '3',
								token: uni.getStorageSync('token'),
								// #endif
								shopId: that.$store.state.shopId,
								gymId: that.venueId
							},
							name: 'file',
							formData: {
								folder: 'COURSE_IMG',
								type: ''
							},
							success(uploadFileRes) {
								// 上传完成需要更新 fileList
								that.$app.closeLoading()
								if (uploadFileRes.statusCode == 413) {
									that.$app.showToast('视频太大')
								} else if (uploadFileRes.statusCode == 200 &&
									uploadFileRes.data) {
									let list = [...that.list]
									const imageAllList2 = list[index].imageAllList2;
									const imageList = list[index].imageList;
									const showList = list[index].showList;
									imageAllList2.push(JSON.parse(uploadFileRes.data).showUrl)
									imageList.push(JSON.parse(uploadFileRes.data).insertUrl)
									showList.push({
										url: JSON.parse(uploadFileRes.data).showUrl,
										type: '1'
									})
									list[index].imageAllList2 = imageAllList2
									list[index].imageList = imageList
									list[index].showList = showList
									that.list = list
								}
							},
						});
					},
					fail: (error) => {
						uni.hideLoading();
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},

			//预览图片
			previewImage: function(item) {
				console.log('预览图片', item)
				uni.previewImage({
					current: item,
					urls: this.imageList
				});
			},

			// 删除图片
			delect(sindex, index) {
				let list = [...this.list]
				const imageAllList2 = list[sindex].imageAllList2;
				const imageList = list[sindex].imageList;
				const showList = list[sindex].showList;
				imageAllList2.splice(index, 1)
				showList.splice(index, 1)
				imageList.splice(index, 1)
				list[sindex].imageAllList2 = imageAllList2
				list[sindex].imageList = imageList
				list[sindex].showList = showList
				this.list = list
			},
			
			deletePic(event) {
				let sindex = event.name
				let index = event.index
				let list = [...this.list]
				const imageAllList2 = list[sindex].imageAllList2;
				const imageList = list[sindex].imageList;
				const showList = list[sindex].showList;
				imageAllList2.splice(index, 1)
				showList.splice(index, 1)
				imageList.splice(index, 1)
				list[sindex].imageAllList2 = imageAllList2
				list[sindex].imageList = imageList
				list[sindex].showList = showList
				this.list = list
			},
			submit() {
				let list = [...this.list]
				this.$app.ajax({
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							timeId: this.timeId,
							list
						}
					},
					api: this.$api.coursePerformanceUp()
				}).then((res) => {
					if (res.errorCode == '000000') {
						this.$app.showToast('提交成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				}).catch(() => {})
			},
			// // 新增图片
			// afterRead(event) {
			// 	let sindex = event.name
			// 	const file = event.file;
			// 	let url = this.$app.baseUrls
			// 	let that = this
			// 	for (let i = 0; i < file.length; i++) {
			// 		that.$app.showLoading('上传中，请稍后...')
			// 		uni.uploadFile({
			// 			url: this.$app.baseUrls,
			// 			filePath: file[i].url,
			// 			header: {
			// 				// #ifdef MP
			// 				Cookie: uni.getStorageSync('cookie'),
			// 				'content-type': 'application/json',
			// 				// #endif
			// 				// #ifdef H5
			// 				platform: '3',
			// 				token: uni.getStorageSync('token'),
			// 				// #endif
			// 				shopId: that.$store.state.shopId,
			// 				gymId: that.venueId
			// 			},
			// 			name: 'file',
			// 			formData: {
			// 				folder: 'COURSE_IMG',
			// 				type: ''
			// 			},
			// 			success(res) {
			// 				// 上传完成需要更新 fileList
			// 				that.$app.closeLoading()
			// 				let list = [...that.list]
			// 				const imageAllList2 = list[sindex].imageAllList2;
			// 				const imageList = list[sindex].imageList;
			// 				const showList = list[sindex].showList;
			// 				imageAllList2.push(JSON.parse(res.data).showUrl)
			// 				imageList.push(JSON.parse(res.data).insertUrl)
			// 				showList.push({
			// 					url: JSON.parse(res.data).showUrl,
			// 				})
			// 				list[sindex].imageAllList2 = imageAllList2
			// 				list[sindex].imageList = imageList
			// 				list[sindex].showList = showList
			// 				that.list = list
			// 			},
			// 		});
			// 	}
			// },

			getDetail() {
				this.$app.ajax({
					api: this.$api.coursePerformance(),
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							timeId: this.timeId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let list = res.recordList || []
						list.forEach(e => {
							e.imageAllList2 = e.imageAllList2 || []
							e.imageList = e.imageList || []
							e.showList = []
							e.imageAllList2.forEach(s => {
								e.showList.push(s)
							})
						});
						this.list = list
					}
				}).catch(() => {})
			}
		}

	}
</script>
<style scoped lang="scss">
	.cont {
		box-sizing: border-box;
		padding-bottom: 120rpx;
	}

	.student {
		padding: 30rpx;
		background: #fff;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.student-l {
		width: 70rpx;
		height: 72rpx;
		margin-right: 20rpx;
	}

	.student-r {
		width: 48rpx;
		height: 48rpx;
	}

	.student-cnt {
		flex: 1;
		color: #222222;
		font-size: 30rpx;
		line-height: 1.5;
	}

	.student-cnt view:nth-of-type(2) {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.bottomState {
		width: 100%;
		padding: 30rpx 30rpx;
		z-index: 9999999;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}


	.py {
		padding: 20rpx;
		box-sizing: border-box;
		height: 180rpx;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background: $bjColor;
		border-radius: 8rpx;
		border: 1px solid #E5E5E5;
	}

	.videoImageUl {
		width: 600rpx;
		display: flex;
		flex-wrap: wrap;

		>view {
			width: 134rpx;
			height: 134rpx;
			position: relative;
			margin-right: 21rpx;
			margin-bottom: 21rpx;
			display: flex;
			background-color: #f4f5f7;
			overflow: hidden;
			align-items: center;
			justify-content: center;

			.del {
				position: absolute;
				top: 0;
				right: 0;
				background-color: #373737;
				height: 28rpx;
				width: 28rpx;
				display: flex;
				border-bottom-left-radius: 100px;
				justify-content: flex-end;
				z-index: 3;
			}

			&:nth-of-type(4n) {
				margin-right: 0;
			}
			.cnts {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>